<template>
  <div class="home">
    <div class="title">
      短信管理
      <el-select
        v-model="site_key"
        placeholder="请选择"
        @change="changeSite"
        class="site-key"
      >
        <el-option
          v-for="item in siteOptions"
          :key="item.site_key"
          :label="item.site_name"
          :value="item.site_key"
        ></el-option>
      </el-select>
    </div>
    <div class="tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="签名管理" name="sms-sign">
          <sign ref="sign" :site_key="site_key" :js_ticket="js_ticket"></sign>
        </el-tab-pane>
        <el-tab-pane label="购买短信包" name="sms-package">
          <package
            :js_ticket="js_ticket"
            :site_key="site_key"
            ref="package"
          ></package>
        </el-tab-pane>
        <el-tab-pane label="发送统计" name="sms-statistics">
          <statistics
            ref="statistics"
            :js_ticket="js_ticket"
            :site_key="site_key"
          ></statistics>
        </el-tab-pane>
        <el-tab-pane label="短信模板" name="sms-tpl">
          <msg-template></msg-template>
        </el-tab-pane>
        <!-- <el-tab-pane label="分配短信" name="sms-share">
          <msg-share></msg-share>
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getSiteList } from "@/api/sign";
import { getJsCodeToTicket } from "@/api/common";
import Sign from "./components/sign.vue";
import Package from "./components/package.vue";
import Statistics from "./components/statistics.vue";
import MsgTemplate from "./components/msg-template.vue";
// import MsgShare from "./components/msg-share.vue";
export default {
  name: "Home",
  components: {
    Sign,
    Package,
    Statistics,
    MsgTemplate
    // MsgShare
  },
  data() {
    return {
      activeName: "sms-sign",
      site_key: null,
      siteOptions: [],
      list: [
        {
          id: 1,
          account_id: 1,
          account_name: "admin",
          sms_sign: "开发者短信签名",
          created_at: "2020-10-19 14:02:32",
          audit_status: 3,
          audit_status_desc: "审核通过",
          refuse_reason: "",
          can_remove: false
        },
        {
          id: 2,
          account_id: 2,
          account_name: "admin",
          sms_sign: "开发者短信签名",
          created_at: "2020-10-19 14:02:32",
          audit_status: 3,
          audit_status_desc: "审核通过",
          refuse_reason: "",
          can_remove: false
        }
      ],
      dateRange: [],
      status_audit: "",
      js_ticket:
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJhcGkudzcuY2MiLCJhdWQiOiJjb25zb2xlLnc3LmNjIiwic3ViIjoianMtdGlja2V0IiwiZXhwIjoxNjYzMjI0NTMxLCJfX2VuY29kZV9kYXRhX18iOiJOdUpNN2h5UTF2OUxwR2s4SDc5QlFkbFwvUVZ0R3RDVlBCcXZreEM1MDdiXC9laFwvcFJ6MjhwMDZYSmhCRVdPNGorWGc1eGZtVGFRSGpWaVhiWDlTRUJHblU2bkJtWnhPRmVKeFZaYzR0bzNVXC9rSWpNZHZtVlV6cVNFTmFSbkNtMjFPRU9VQ3hDMDFYMU02dFwvNExVUnFDVjhuZFdFU3pnSU1JZDNSb2hlOHZ1T2tvaXYwb0VGaWFVTm9hckNDZXlOa0M1NEdESkQrQjlrajIwUE5qaU9vdHc9PSJ9.ueEJhuKfuZ1qur8HgaPOr0ozgvHULFL3KRH514hr4HS3SgLxvahNXNTYHtbJH1pso6HnbqgZ531c0M4K-V4Y0A"
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.activeName = localStorage.activeName;
      this.dateRange = this.$refs.sign.dateRange;
      // this.getJsCodeToTicket();
      this.getSiteList();
    },
    getJsCodeToTicket() {
      getJsCodeToTicket({ code: "r303J1aR6VfAJG6FRIR3fSL6V709z67G" }).then(
        res => {
          console.log(res);
          // let js_ticket =
          //   "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJhcGkudzcuY2MiLCJhdWQiOiJjb25zb2xlLnc3LmNjIiwic3ViIjoianMtdGlja2V0IiwiZXhwIjoxNjYzMjI0NTMxLCJfX2VuY29kZV9kYXRhX18iOiJOdUpNN2h5UTF2OUxwR2s4SDc5QlFkbFwvUVZ0R3RDVlBCcXZreEM1MDdiXC9laFwvcFJ6MjhwMDZYSmhCRVdPNGorWGc1eGZtVGFRSGpWaVhiWDlTRUJHblU2bkJtWnhPRmVKeFZaYzR0bzNVXC9rSWpNZHZtVlV6cVNFTmFSbkNtMjFPRU9VQ3hDMDFYMU02dFwvNExVUnFDVjhuZFdFU3pnSU1JZDNSb2hlOHZ1T2tvaXYwb0VGaWFVTm9hckNDZXlOa0M1NEdESkQrQjlrajIwUE5qaU9vdHc9PSJ9.ueEJhuKfuZ1qur8HgaPOr0ozgvHULFL3KRH514hr4HS3SgLxvahNXNTYHtbJH1pso6HnbqgZ531c0M4K-V4Y0A";
          // this.getSiteList(js_ticket);
        }
      );
    },
    changeSite() {
      this.getList();
    },
    getList() {
      switch (this.activeName) {
        case "sms-sign":
          this.$nextTick(() => {
            this.$refs.sign.getSignList();
          });
          break;
        case "sms-package":
          this.$nextTick(() => {
            this.$refs.package.getSmsInfo();
          });
          break;
        case "sms-statistics":
          this.$nextTick(() => {
            this.$refs.statistics.getSendLogs();
          });
          break;
        case "sms-tpl":
          break;
        case "sms-share":
          break;

        default:
          break;
      }
    },
    handleClick(tab) {
      localStorage.activeName = tab.name;
      this.getList();
    },
    getSiteList() {
      getSiteList({
        js_ticket: this.js_ticket
      }).then(res => {
        console.log(res);
        this.siteOptions = res.data;
        this.site_key = res.data[0].site_key;
        this.getList();
      });
    },
    getData() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
